<template >

  <div style="background-color: #F2F2F2">

    <div >
      <div style="border: 1px;" >
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

          <el-menu-item index="1" ><img style="margin-left: 20px ;width: 150px;height: 50px" src="http://qpt0e0e6g.hb-bkt.clouddn.com/login.png"></el-menu-item>
          <el-menu-item index="2" style="margin-left: 10px;font-size: 18px"><a href="index.vue">首页</a></el-menu-item>
          <el-menu-item index="3" style="margin-left: 10px;font-size: 18px">榜单</el-menu-item>
          <el-menu-item index="4"  style="margin-left: 10px;font-size: 18px">COS</el-menu-item>
          <el-menu-item index="5"  style="margin-left: 10px;font-size: 18px" ><router-link to="/redios">视频</router-link></el-menu-item>
          <el-menu-item index="6"  style="margin-left: 10px;font-size: 18px">问答</el-menu-item>
          <el-menu-item index="7">
            <el-input  style="width: 200px ;"
                       placeholder="搜索COS、视频、用户..."
                       v-model="input"
                       clearable >
            </el-input>  <el-button @click="sousuo" style="height: 39px;" con="el-icon-search">搜索</el-button>
          </el-menu-item>
          <el-menu-item index="8"  v-if="disUser" style="margin-left: 65px;font-size: 18px" >
            <template>
              <div class="demo-type" @click="tooneself()">
                <el-avatar :size="50" :src="user.pic">
                  <img  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                </el-avatar>
              </div>
            </template>
          </el-menu-item>
          <el-menu-item index="9"  v-if="disUser" style="margin-left: 5px;font-size: 18px" @click="outlogin">退出</el-menu-item>
          <el-menu-item index="8" v-if="disUser1" style="margin-left: 65px;font-size: 18px" @click="tologin">登录</el-menu-item>
          <el-menu-item index="9"  v-if="disUser1" style="margin-left: 5px;font-size: 18px" @click="toregist">注册</el-menu-item>
          <el-dropdown index="10" style="margin-left: 10px ;" >
            <el-button style="background-color: #ff6fa2;width: 100px;height: 50px;">
              <i class="el-icon-finished el-icon--right"style="font-size: 20px;align-content: center;color: aliceblue">发布</i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-circle-plus">图片</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus"><router-link to="/mvUpload">视频</router-link></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-menu>
      </div>
    </div>

    <div style="margin-top: 50px;width: 1200px; margin-left: 145px;" >
      <el-row>
        <el-col :span="17" >
          <div class="grid-content bg-purple" style="background-color: #ffffff; ">
            <div style="height: 30px">

            </div>
            <div>
              2020-11-29 14:35:23 &nbsp  | &nbsp  共 3 P &nbsp&nbsp <span style="color: blue">{{count}}</span>&nbsp&nbsp 条评论
              <hr style="width: 800px;margin-top: 20px"/>
            </div>
           <div style="width: 600px;margin-left: 125px;" > <!--v-if="share.share_desc!=null"-->
             <span style="text-align: left;margin-top: 20px;white-space:pre-line;" >
                          {{shore.mvDesc}}
             </span>
           </div>
           <div style="width: 600px;margin-left: 20px">
             <video style="width: 800px;height: 500px;" autoplay="autoplay" :src="shore.video">
             </video>
           </div>
            <!--<div style="margin-top: 80px;height: 100px">-->
              <!--<span style="font-size: 18px;color: #3385ff;">@&nbsp著作权归作者本人所有</span>-->
            <!--</div>-->
            <!--<div style="height: 30px">-->

            <!--</div>-->
            <!--<div style="float:left;margin-top: -50px">-->
              <!--<div style="float:left;margin-left: 200px">-->
                <!--<span>分享到&nbsp&nbsp&nbsp&nbsp</span>-->
              <!--</div>-->
              <!--<div  style="float:left;">-->
                <!--<el-image style="height: 20px;width: 20px" src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3197345605,1200908067&fm=26&gp=0.jpg" class="image"></el-image>-->
              <!--</div>-->
              <!--<div style="float:left; margin-left: 20px">-->
                <!--<el-image style="height: 20px;width: 20px" src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1058503093,1997955484&fm=26&gp=0.jpg" class="image"></el-image>-->
              <!--</div>-->
              <!--<div style="float:left; margin-left: 20px">-->
                <!--<el-image style="height: 20px;width: 20px" src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3261316742,661433622&fm=26&gp=0.jpg" class="image"></el-image>-->
              <!--</div>-->
              <!--<div style="float:left; margin-left: 20px">-->
                <!--<el-image style="height: 20px;width: 20px" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2627840813,4255959989&fm=26&gp=0.jpg" class="image"></el-image>-->
              <!--</div>-->
              <!--<div style="float:left;margin-top: -10px;margin-left: 100px">-->
                <!--<el-button>分享到半次元</el-button>-->
              <!--</div>-->
            <!--</div>-->
          </div>
          <div class="" style="background-color: azure;margin-top: 50px">
            <div>
              <el-input style="margin-top: 30px;width: 750px;" v-model="comments" placeholder="请输入内容"></el-input>
              <button style="height: 40px;" @click="gocomments">评论</button>
            </div>
            <div style="margin-top: 50px">
              <span>共<span style="color: blue">{{count}}</span>条评论</span>
            </div>
            <div>
              <hr style="width: 800px;margin-top: 20px"/>
            </div>


            <div v-for="o in commentsList" :key="o" >
              <div style="height: 50px;margin-top: 30px">
                <div style="float:left;width: 100px;margin-left: 30px">
                  <el-image style="height: 50px;width: 50px; border-radius: 100px;" :src="o.pic" class="image"></el-image>
                </div>
                <div style="height: 50px;width: 200px;float:left;text-align: left">
                  <span style="font-size: 15px;color: #3385ff;">{{o.name}}</span>
                </div>
              </div>
              <div style="margin-left: 100px;text-align: left">
                <span style="font-size: 18px;">{{o.mvdis_desc}}</span>
              </div>
              <hr style="width: 800px;margin-top: 20px"/>
            </div>
          </div>

        </el-col>

        <el-col :span="6" style="margin-left: 50px">
          <div class="grid-content bg-purple" style="height: 300px;background-color: #ffffff">
            <div style="height: 15px">

            </div>
            <div style="height: 110px; "><!--border:1px yellow solid -->
                <a href=""><el-image style="height: 100px;width: 100px;margin-left: 95px; border-radius: 100px;margin-top: 10px" :src="user.pic" class="image"></el-image></a>
            </div>
            <div style="margin-top: 10px;font-family:'KaiTi'">
                <span style="font-size: 18px;color: #3385ff; ">{{user.name}}</span>
            </div>
            <div style="margin-top: 10px;font-size: 15px ;font-family:'NSimSun'">
              <a  href="">关注</a>
              &nbsp|&nbsp
              <a  href="">粉丝{{user.fans}}</a>
            </div>
            <div style="margin-top: 15px;font-size: 13px;width: 250px;margin-left: 25px;font-family:'STFangsong'">
              这是一个贫民窟cos 扣扣:3454763079（欢迎扩列） 封面是我的可爱麻麻
            </div>
            <div style="margin-top: 15px;height: 200px;">
              <div style="width: 110px;float:left;margin-left: 20px">
                <el-button type="success" style="width: 100px;height: 20px;font-size: 15px;line-height:2px;">+关注</el-button>
              </div>
              <div style="width: 60px;float:left;margin-left: 15px">
                <el-button style="width: 60px;height: 20px;line-height:2px;"><i class="el-icon-message" style="margin-top: -6px;margin-left: -12px">私信</i></el-button>
              </div>
              <div style="width: 60px;float:left;margin-left: 15px;">
                <el-button style="width: 60px;height: 20px;line-height:2px;"><span style="margin-left: -5px">提问</span></el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

    </div>
    <div>
      <el-image style="width: 1503px" src="http://qq0251abz.hd-bkt.clouddn.com/A8CD%28S53%5DJC7Y%60~HN%25GE9OR.png" class="image"></el-image>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  axios.defaults.withCredentials=true
    export default {
        name: "share",
      data(){
          return{
            shore:{},
            activeIndex: '1',
            comments: '',
            input:'',
            disUser:false,
            disUser1:true,
            commentsList:[],
            user:{},
            List:[1,2,3,4],
            count:'',
            id:''
       }
      },
      methods:{
          //获取分享视频
        findMvShareById:function () {
          //获取跳转页面传来的参数
          this.id=this.$route.params.id;
          axios.post("http://localhost/bcy-mvshare/redio/findMvShareById",{id:this.id}).then(res=>{
              if (res.data.code==200){
                this.shore=res.data.data;
              }
          })
        },
        //获取分享作者个人信息
        findUser:function () {
          this.id=this.$route.params.id;
          axios.post("http://localhost/bcy-mvshare/redio/findUserByToId",{id:this.id}).then(res=>{
            if (res.data.code==200){
              this.user=res.data.data;
              disUser:true;
                disUser1:false;
            }
          })

        },
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
        //评价
        gocomments:function () {
            axios.post("http://localhost/bcy-mvshare/redio/addcomments",{comments:this.comments,id:this.id,uid:this.user.id}).then(res=>{
              if (res.data.code==200){
                this.$message({
                  type: 'success',
                  message: '评论发表成功!',
                });
                this.findcomments();
                /*this.$router.push("/share");*/
              }if (res.data.code==206){
                alert("未登录请登录")
                this.$router.push("/login");
              } if(res.data.code==100) {
                alert("评论失败")
              }
          })
        },  tomvUp:function(){
          this.$router.push("/mvUpload")
        },
        sousuo:function(){
          this.$router.push("/redios")
        },outlogin:function(){
          axios.get("http://localhost/bcy-user/user/outlogin").then(res=>{
            if (res.data.code==200){
              this.$message({
                type: 'success',
                message: '退出成功!',
              });
              this.$router.push("/login")
            }
          })

        }, toregist:function(){
          this.$router.push("/regist")
        },  tooneself:function () {
          this.$router.push("/oneself")
        },
        toredios:function(){
          this.$router.push("/redios")
        },
        findcomments:function () {
          this.id=this.$route.params.id;
          axios.post("http://localhost/bcy-mvshare/redio/findcomments",{id:this.id}).then(res=>{
            if (res.data.code==200){
              this.commentsList=res.data.data;
              this.count=res.data.count;
            }
          })
        }
      },
      mounted() {
          this.findMvShareById();
          this.findUser();
          this.findcomments();
      }
    }
</script>

<style scoped>
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 60px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
